@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

:root {
  --zswatch-primary: #FFBAAF;
  --zswatch-secondary: #9EC8F6;
  --zswatch-dark: #495060;
  --zswatch-darker: #30343F;
  --zswatch-gradient: linear-gradient(135deg, #1a1f2e 0%, var(--zswatch-darker) 30%, #2a2f3e 60%, #1a1f2e 100%);
  --text-primary: var(--ifm-font-color-base);
  --ifm-navbar-background-color: var(--zswatch-primary);
  --ifm-navbar-link-color: var(--zswatch-darker);
  --ifm-navbar-link-hover-color: var(--zswatch-secondary);
}

body {
  color: var(--text-primary);
}

/* Apply gradient background to all pages */
.main-wrapper,
.docusaurus-wrapper {
  background: white;
  min-height: 100vh;
}

[data-theme='dark'] .main-wrapper,
[data-theme='dark'] .docusaurus-wrapper {
  background: var(--zswatch-gradient);
  min-height: 100vh;
}

/* Override for front page - ensure it always shows gradient */
.zswatch-background-gradient-always {
  background: var(--zswatch-gradient) !important;
}

.zswatch-background-gradient-always .main-wrapper,
.zswatch-background-gradient-always .docusaurus-wrapper {
  background: transparent !important;
}

.zswatch-background-gradient {
  background: white;
}

[data-theme='dark'] .zswatch-background-gradient {
  background: var(--zswatch-gradient);
}

.hero--primary {
  --ifm-hero-background-color: var(--zswatch-darker);
  --ifm-hero-text-color: var(--zswatch-secondary);
}

.toggleButton_gllP {
  color: var(--zswatch-darker);
}

.menu__link {
  color: var(--zswatch-darker);
}

.menu__link:hover {
  color: #9EC8F6;
}

.menu__link--active {
  color: #6d7383;
}

.navbar__toggle.clean-btn {
  color: var(--zswatch-darker);
}

.navbar__toggle.clean-btn:hover {
  color: #9EC8F6;
}

.navbar-sidebar__close {
  color: var(--zswatch-darker);
  --ifm-color-emphasis-600: var(--zswatch-darker);;
}

.menu_SIkG {
  background-color: var(--zswatch-primary);
}

.menu__caret {
  color: var(--zswatch-darker);
}

.navbar-sidebar__back {
  color: var(--zswatch-darker);
}

/* Remove ugly button outlines and improve button styling */
button {
  outline: none !important;
  border: none;
}

button:focus {
  outline: none !important;
  box-shadow: none !important;
}

button:focus-visible {
  outline: 2px solid var(--zswatch-secondary) !important;
  outline-offset: 2px;
}

/* Ensure our custom buttons maintain their styling */
.btn, [class*="bg-"], [class*="border-"] {
  outline: none !important;
}

.btn:focus, [class*="bg-"]:focus, [class*="border-"]:focus {
  outline: none !important;
  box-shadow: none !important;
}
